<template>
  <div class="release">
    <head-top></head-top>
    <el-form
      ref="paper"
      :model="paper"
      label-width="120px"
      size="mini"
      :disabled="elForm"
    >
      <el-form-item label="考试id" prop="id" style="width: 400px">
        <el-input
          @blur="checkStudentId()"
          class="i1"
          type="text"
          autocomplete="off"
          v-model="paper.id"
          :disabled="idFrom"
        />
      </el-form-item>
      <el-form-item
        label="考试名称:"
        style="width: 400px"
        size="mini"
        prop="name"
      >
        <el-input
          v-model="paper.name"
          type="text"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="技术方向:" label-width="120px" size="mini">
        <!-- <div class="block2">
          <el-cascader v-model="value" :options="options" @change="handleChange" style="width: 280px"></el-cascader>
        </div> -->
      </el-form-item>
      <el-form-item label="考试时间:" label-width="120px">
        <el-time-select
          placeholder="起始时间"
          v-model="paper.starttime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
          }"
          style="width: 132px"
        >
        </el-time-select>
        -
        <el-time-select
          placeholder="结束时间"
          v-model="paper.endtime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
            minTime: startTime,
          }"
          style="width: 133px"
        >
        </el-time-select>
      </el-form-item>

      <el-form-item label="考试时长:" style="width: 252px">
        <el-input></el-input>
      </el-form-item>

      <el-form-item label="考试时间:" style="width: 252px">
        <el-date-picker
          type="datetime"
          placeholder="日期时间"
          style="width: 132px"
          v-model="paper.starttime"
        >
        </el-date-picker>
      </el-form-item>

      <div class="add-questions">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button
            slot="trigger"
            size="small"
            type="primary"
            style="width: 132px"
            >选取试题文件</el-button
          >
        </el-upload>
      </div>

      <el-form-item class="checks-release">
        <el-button type="primary" @click="saveOrUpdate()">发布</el-button>
        <el-button @click="resetForm('paper')" :disabled="resetBtn"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import headTop from "../../components/headTop.vue";
import axios from "axios";
export default {
  data() {
    return {
      // 是否禁用
      elForm: false,
      idFrom: false,
      resetBtn:false,
      // 技术方向
      value: [],
      options: [
        {
          value: "zhinan",
          label: "前端",
          children: [
            {
              value: "shejiyuanze",
              label: "前端基础",
              children: [
                {
                  value: "yizhi",
                  label: "HTML",
                },
                {
                  value: "fankui",
                  label: "JS",
                },
                {
                  value: "xiaolv",
                  label: "jQuery",
                },
                {
                  value: "kekong",
                  label: "es6",
                },
              ],
            },
            {
              value: "daohang",
              label: "前端框架",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "webpack",
                },
                {
                  value: "dingbudaohang",
                  label: "vue",
                },
                {
                  value: "react",
                  label: "react",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "后端",
          children: [
            {
              value: "basic",
              label: "javaSE",
              children: [
                {
                  value: "layout",
                  label: "集合",
                },
                {
                  value: "color",
                  label: "常用类",
                },
                {
                  value: "typography",
                  label: "异常处理",
                },
                {
                  value: "icon",
                  label: "面向对象",
                },
                {
                  value: "button",
                  label: "文件流",
                },
              ],
            },
            {
              value: "form",
              label: "javaEE",
              children: [
                {
                  value: "radio",
                  label: "jdbc",
                },
                {
                  value: "checkbox",
                  label: "JSP",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "全栈",
          children: [
            {
              value: "axure",
              label: "前端",
            },
            {
              value: "sketch",
              label: "后端",
            },
            {
              value: "jiaohu",
              label: "数据库",
            },
          ],
        },
      ],

      paper: {
        id: "",
        name: "",
        starttime: "",
        endtime: "",
      },
      startTime: "",
      endTime: "",
      // 上传
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  components: {
    headTop,
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, from) {
      // 路由变化的方式，路由发生变化，方法就会执行
      this.init();
    },
  },
  methods: {
    init() {
      // 判断请求路径中是否有 id 值
      if (this.$route.params && this.$route.params.id) {
        // 修改操作
        // 1、从路径中获取 id 值
        const id = this.$route.params.id;
        // 2、根据学生 ID 查询学生信息
        this.getStudentInfo(id);
        this.elForm = false;
        // 3、禁用表单项（学生ID）
        this.idFrom = true;
      } else {
        //试题添加
        // 请求路径中 没有id值，做试题添加操作
        // 清空表单
        this.student = {};
        this.imgUrl = '',
        this.elForm = false;
        this.idFrom = false;
      }
    },
    checkStudentId() {
      if (!(this.$route.params && this.$route.params.id)) {
        axios.get(`http://114.116.52.2:8008/testarrange/selectTestArrangeById/${this.paper.id}`).then(res => {
          let code = res.data.code;
          if (code == 200) {
            this.$message({
              message: '警告哦，该试题已被注册！',
              type: 'warning'
            });
          }
        })
      }
    },
    
    // 保存,发布
    saveOrUpdate() {
      if (this.$route.params && this.$route.params.id) {
        this.resetBtn = true;
        this.updateStudent();
      } else {
        this.resetBtn = false;
        this.addPaper();
      }
    },
    // 添加试题
    addPaper() {
      axios.post('http://114.116.52.2:8008/testarrange/addTestArrange', this.paper).then(res => {
        let code = res.data.code;
        if (code == 200) {
          this.$message({
            message: '恭喜你，添加学生成功！',
            type: 'success'
          });
        } else {
          this.$message.error('添加学生失败，该学号已存在！');
        }
        this.$router.push('/studentList');
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 点击上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

  },
};
</script>
<style scoped>
.release {
  height: 800px;
}

.el-form {
  /* margin-top: 40px; */
  width: 600px;
  margin: 40px auto;
  /* text-align: center; */
  /* margin: auto; */
}

.line {
  margin-left: 8px;
}

.add-questions {
  width: 400px;
}

.add-questions button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #7bc9de;
  border: 1px solid #c4c4c4;
  color: #1f2d3d;
  margin: 0;
  padding: 10px 15px;
  border-radius: 4px;
  margin-left: 120px;
}

.checks-release {
  margin-top: 100px;
}

.el-upload-list {
  background-color: #7bc9de;
  margin: 0 0 0 0;
  display: block;
}
</style>